<!DOCTYPE html>
<html>
<head>
    <title>Save as...</title>
    <style type="text/css">
        html,body { padding:0;margin:0;overflow:hidden; }
        label { height:1.5em;display:block;width:100%; }
        #label { float:right; }
        #saveas-iframe { clear:right; border:none; }
        #form { padding:0; }
    </style>
    <script src="../../scripts.js" type="text/javascript"> </script>
    <script type="text/javascript">
    // <![CDATA[
        jQuery(function($) {
            $('#form').submit(function(event){
                event.preventDefault();
                parent.postMessage('POST save', '*');
                return false;
            });
            $('#saveas-iframe').load(calli.wait().over);
            if (window.location.hash) {
                var i = window.location.hash.indexOf('!');
                if (i > 0) {
                    var url = window.location.hash.substring(i + 1);
                    if (url) {
                        $('#saveas-iframe')[0].src = url;
                    } else {
                        $('#saveas-iframe')[0].src = "/?view";
                    }
                    var label = decodeURIComponent(window.location.hash.substring(1, i));
                    $('#label').val(label);
                } else {
                    var label = decodeURIComponent(window.location.hash.substring(1));
                    $('#label').val(label);
                    $('#saveas-iframe')[0].src = "/?view";
                }
            } else {
                $('#saveas-iframe')[0].src = "/?view";
            }
            var src = $('#saveas-iframe')[0].src;
            $(window).bind('message', function(event) {
                var data = event.originalEvent.data;
                if (event.originalEvent.source == $('#saveas-iframe')[0].contentWindow && data.indexOf('PUT src\n\n') == 0) {
                    src = data.substring(data.indexOf('\n\n') + 2);
                } else if (event.originalEvent.source == parent && data == 'GET label') {
                    parent.postMessage('OK\n\nGET label\n\n' + $('#label').val(), '*');
                } else if (event.originalEvent.source == parent && data == 'GET url') {
                    parent.postMessage('OK\n\nGET url\n\n' + src, '*');
                }
            });
            var i=$('#label').val().search(/[\.\/]/);
            if (i>0) {
                try {
                    $('#label')[0].setSelectionRange(0, i);
                } catch(e) {
                    $('#label')[0].select();
                }
            } else {
                $('#label')[0].select();
            }
        });
    // ]]>
    </script>
</head>
<body>
    <form id="form">
        <label for="label"><input class="auto-expand" id="label" type="text" autofocus="autofocus" />Name: </label>
        <iframe id="saveas-iframe" name="saveas-iframe" class="flex"></iframe>
    </form>
</body>
</html>

